<template>
  <div>
    <img class="clipe" :src="image || empty" @click="showClipe" />
    <!-- 图片预览 -->
    <Clipse
      :visible="visibleClipse"
      :image="image"
      @close="visibleClipse = false"
    ></Clipse>
  </div>
</template>

<script>
import empty from "@/assets/empty.png";
import Clipse from "./Clipse";

export default {
  components: {
    Clipse
  },
  props: {
    image: {
      type: String,
      required: true,
      default: ""
    },
    canClick: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  data() {
    return {
      empty,
      visibleClipse: false
    };
  },
  methods: {
    showClipe() {
      if (!this.canClick) return;
      this.visibleClipse = true;
    }
  }
};
</script>

<style lang="less" scoped>
.clipe {
  width: 34px;
  height: 34px;
  cursor: pointer;
}
</style>
